<template>
	<div class="w-100">
		<div class="tabs-content" v-if="!showResult">
			<el-steps :active="active" align-center>
				<el-step v-for="(item, index) in TabsList" :key="index" :title="item.label" description="" />
			</el-steps>
			<el-scrollbar max-height="80vh">
				<div class="active-item" v-if="active == 1">
					<BaseInfo ref="formRef" @refresh="onRefresh" @back="handleBack"></BaseInfo>
				</div>
				<div class="active-item" v-if="active == 2">
					<Extend ref="formRef" @refresh="onRefresh"></Extend>
				</div>
			</el-scrollbar>
			<div class="fc">
				<template v-if="active == 2">
					<el-button class="ap-btn" type="primary" @click="handleSubmit('submit')"> 保存 </el-button>
				</template>
				<template v-else>
					<el-button class="ap-btn" @click="handleSubmit('submit')"> 直接提交 </el-button>
					<el-button class="ap-btn" type="primary" @click="handleSubmit('save-next')"> 保存并进入下一步 </el-button>
				</template>
			</div>
		</div>
		<DataGather v-else :dataType="5" :gatherObj="gatherObj" @back="handleBack" @init="getInitMod"></DataGather>
	</div>
</template>

<script setup lang="ts">
import BaseInfo from './BaseInfo/index.vue'
import Extend from './Extend/index.vue'
import DataGather from '@/views/datacenter/components/DataGather/result.vue'

const emit = defineEmits(['refresh'])
const formRef = ref(null)
// 采集信息
const gatherObj: any = ref({})
const active: any = ref(1)
const showResult = ref(false)
const operateType = ref('')
const next = () => {
	if (active.value++ > 2) active.value = 2
}

const TabsList = [
	{
		label: '基础信息',
		prop: 'dp_service_object',
	},
	{
		label: '扩展信息',
		prop: 'dp_service_object_extend',
	},
]
const getInitMod = () => {
	active.value = 1
	showResult.value = false
}
const onRefresh = (item) => {
	gatherObj.value = item || {}
	if (operateType.value == 'save-next') {
		next()
	} else {
		showResult.value = true
	}
}
const handleSubmit = (type) => {
	operateType.value = type
	formRef.value!.onSave()
}
const handleBack = () => {
	emit('refresh')
}
</script>

<style scoped lang="scss">
.active-item {
	padding: 1rem;
	margin: 1rem;
}
</style>
